<!-- 绑定客户材料 -->
<template>
  <div class="modal-mask">
    <div class="modal-content client-materials">
      <div class="title-wrap flx-justify-between">
        <div class="title">{{ props.title }}</div>
        <div class="close pointer" @click="cancel">
          <el-icon><Close /></el-icon>
        </div>
      </div>

      <div class="p-title mt-12 mb-12">已绑定</div>
      <div class="table-body-min-height">
        <ProTable ref="proTable" :columns="columns" :data="[{}]" :toolButton="false" :pagination="false">
          <!-- Expand -->
          <template #expand="scope">
            {{ scope.row }}
          </template>

          <!-- 更新时间自定义表头 -->
          <template #updateTimeHeader="scope">
            <span class="inline-block">
              <span class="flx-align-center">
                <span>{{ scope.column.label }}</span>
                <span class="flx-align-center ml-10">
                  <el-icon @click.stop="handleClickCalendar"><Calendar /></el-icon>
                  <el-date-picker
                    v-model="times"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    ref="timePick"
                    class="time-pick"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  >
                  </el-date-picker>
                </span>
              </span>
            </span>
          </template>

          <!-- 图标 -->
          <template #icon>
            <el-image src="" fit="cover" style="width: 30px; height: 30px"></el-image>
          </template>

          <!-- 状态 -->
          <template #state>
            <el-tag type="success">已存</el-tag>
          </template>

          <!-- 操作 -->
          <template #operation="scope">
            <el-button link type="primary" @click="views(scope.row)">查看</el-button>
            <el-button link type="primary" @click="unbindHandle(scope.row)">解除绑定</el-button>
          </template>
        </ProTable>
      </div>

      <!-- 绑定客户材料 -->
      <div class="p-title mt-12 mb-12">绑定客户材料</div>
      <el-alert title="绑定仅显示客户材料为“已存”状态的信息，暂存状态的材料暂不显示" type="info" show-icon />
      <div class="table-body-min-height mt-12">
        <ProTable ref="proTable" :columns="columns" :data="[{}]" :toolButton="false" :pagination="false">
          <!-- Expand -->
          <template #expand="scope">
            {{ scope.row }}
          </template>

          <!-- 更新时间自定义表头 -->
          <template #updateTimeHeader="scope">
            <span class="inline-block">
              <span class="flx-align-center">
                <span>{{ scope.column.label }}</span>
                <span class="flx-align-center ml-10">
                  <el-icon @click.stop="handleClickCalendar"><Calendar /></el-icon>
                  <el-date-picker
                    v-model="times"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    ref="timePick"
                    class="time-pick"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  >
                  </el-date-picker>
                </span>
              </span>
            </span>
          </template>

          <!-- 图标 -->
          <template #icon>
            <el-image src="" fit="cover" style="width: 30px; height: 30px"></el-image>
          </template>

          <!-- 状态 -->
          <template #state>
            <el-tag type="success">已存</el-tag>
          </template>

          <!-- 操作 -->
          <template #operation="scope">
            <el-button link type="primary" @click="views(scope.row)">查看</el-button>
            <el-button link type="primary">绑定</el-button>
          </template>
        </ProTable>
      </div>
    </div>
  </div>

  <!-- 客户材料详情 -->
  <client-materials-detail v-if="showDetail" ref="clientMaterialsDetailRef"></client-materials-detail>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, reactive, nextTick } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { resetUserPassWord } from "@/api/modules/user";
import ClientMaterialsDetail from "./ClientMaterialsDetail.vue";

const props = defineProps({
  title: {
    type: String,
    default: "客户材料"
  }
});

const emit = defineEmits(["close"]);

// 获取申请人类型
const getTypeList = () => {
  return [
    { text: "A", value: "A" },
    { text: "B", value: "B" },
    { text: "C", value: "C" },
    { text: "D", value: "D" },
    { text: "E", value: "E" },
    { text: "F", value: "F" },
    { text: "G", value: "G" }
  ];
};

const columns = reactive([
  {
    prop: "username",
    label: "申请人名称",
    width: 135
  },
  {
    prop: "type",
    label: "申请人类型",
    minWidth: 135,
    filterMultiple: true,
    filters: getTypeList(),
    filterMethod: (value, row) => {
      return row.user.detail.age == value;
    }
  },
  {
    prop: "brandName",
    label: "商标名称",
    minWidth: 135
  },
  {
    prop: "icon",
    label: "商标图标",
    minWidth: 97
  },
  {
    prop: "updateTime",
    label: "更新时间",
    minWidth: 144,
    sortable: true
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 114,
    fixed: "right",
    className: "table-operation"
  }
]);

// 选择时间
const times = ref([]);
const timePick = ref();
const handleClickCalendar = () => {
  timePick.value.focus();
};

// 解除绑定
const unbindHandle = async row => {
  await useHandleData(resetUserPassWord, { id: row.id }, `是否确定解除绑定`);
};

// 查看详情
const showDetail = ref(false);
const clientMaterialsDetailRef = ref();
const views = row => {
  showDetail.value = true;
  let params = {
    title: "客户材料",
    row: { ...row }
  };
  nextTick(() => {
    clientMaterialsDetailRef.value.acceptParams(params);
  });
};

const cancel = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.modal-mask {
  background: rgba(9, 9, 9, 0.5);

  .client-materials {
    width: 800px;
    height: auto;
  }
}
</style>
